<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12.2组件状态自更新</title>
</head>
<body>
  <div id="app"></div>
  
<script type="module">

import {createRenderer} from '../3.renderer/createRenderer.js'
import {reactive} from '../2.observer/reactive.js'
import {effect} from '../2.observer/effect.js'
import {queueJob} from '../3.renderer/queueJob.js'
const myComponent = {
  name: 'myComponent',
  data() {
    return {
      foo: 'hello world'
    }
  },
  render() {
    return {
      type: 'div',
      props:{
        onClick:() => {
          this.foo = 'hi'
        }
      },
      children: `foo 的值是 ${this.foo}`
    }
  }
}

//组件vnode
const vnode = {
  type: myComponent
}
function debuggerMountComponent(patch) {
  return function mountComponent (vnode, container, anchor) {
    const componentOptions = vnode.type
    const {render, data} = componentOptions
    const state = reactive(data())
    effect(()=> {
      const subTree = render.call(state, state)
      patch(null, subTree, container, anchor)
    },{
      scheduler:queueJob
    }) 
  }
}

const render = createRenderer({debuggerMountComponent})
render(vnode, document.getElementById('app'))
</script>
</body>

</html>